<template>
  <div id="profile-page" style=" animation: fadeIn 0.5s ease-in;">
    <!-- 个人信息 -->
    <div style="background: linear-gradient(to right, #3b82f6, #4f46e5); padding: 1.5rem; color: white;">
      <div style="display: flex; align-items: center;">
        <img src="https://picsum.photos/id/64/200/200" alt="用户头像" style="width: 4rem; height: 4rem; border-radius: 9999px; object-fit: cover; border: 2px solid white;">
        <div style="margin-left: 1rem;">
          <h2 style="font-weight: bold; font-size: 1.125rem;">张师傅</h2>
          <p style="color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; margin-top: 0.25rem;">安装师傅</p>
        </div>
        <button style="margin-left: auto;">
          <i class="fa-solid fa-cog" style="color: rgba(255, 255, 255, 0.8);"></i>
        </button>
      </div>
      <div style="margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: center;">
        <div>
          <p style="font-size: 1.25rem; font-weight: bold;">42</p>
          <p style="color: rgba(255, 255, 255, 0.8); font-size: 0.75rem; margin-top: 0.25rem;">完成订单</p>
        </div>
        <div>
          <p style="font-size: 1.25rem; font-weight: bold;">4.9</p>
          <p style="color: rgba(255, 255, 255, 0.8); font-size: 0.75rem; margin-top: 0.25rem;">平均评分</p>
        </div>
        <div>
          <p style="font-size: 1.25rem; font-weight: bold;">¥8,650</p>
          <p style="color: rgba(255, 255, 255, 0.8); font-size: 0.75rem; margin-top: 0.25rem;">总收入</p>
        </div>
      </div>
    </div>

    <!-- 我的钱包 -->
    <div style="background-color: white; padding: 1rem; margin-top: 0.75rem;">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <h3 style="font-weight: 500;">我的钱包</h3>
        <button style="color: #3b82f6; font-size: 0.875rem;">提现</button>
      </div>
      <div style="margin-top: 0.75rem; display: flex; align-items: center;">
        <span style="font-size: 1.5rem; font-weight: bold;">¥3,250.00</span>
        <span style="font-size: 0.875rem; color: #6b7280; margin-left: 0.5rem;">可提现金额</span>
      </div>
      <div style="margin-top: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; text-align: center;">
        <a  style="padding: 0.5rem; border-radius: 0.5rem; transition: background-color 0.2s; hover: background-color: #f9fafb;">
          <i class="fa-solid fa-wallet" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.75rem; margin-top: 0.25rem;">账户余额</p>
        </a>
        <a  style="padding: 0.5rem; border-radius: 0.5rem; transition: background-color 0.2s; hover: background-color: #f9fafb;">
          <i class="fa-solid fa-history" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.75rem; margin-top: 0.25rem;">提现记录</p>
        </a>
        <a  style="padding: 0.5rem; border-radius: 0.5rem; transition: background-color 0.2s; hover: background-color: #f9fafb;">
          <i class="fa-solid fa-credit-card" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.75rem; margin-top: 0.25rem;">银行卡</p>
        </a>
        <a  style="padding: 0.5rem; border-radius: 0.5rem; transition: background-color 0.2s; hover: background-color: #f9fafb;">
          <i class="fa-solid fa-question-circle" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.75rem; margin-top: 0.25rem;">帮助</p>
        </a>
      </div>
    </div>

    <!-- 我的订单 -->
    <div style="background-color: white; padding: 1rem; margin-top: 0.75rem;">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <h3 style="font-weight: 500;">我的订单</h3>
        <a  style="color: #3b82f6; font-size: 0.875rem;">查看全部</a>
      </div>
      <div style="margin-top: 0.75rem; display: flex; gap: 0.5rem;">
        <a  style="flex: 1; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid #3b82f6; color: #3b82f6;">全部</a>
        <a  style="flex: 1; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid transparent; color: #6b7280;">待服务</a>
        <a  style="flex: 1; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid transparent; color: #6b7280;">进行中</a>
        <a  style="flex: 1; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid transparent; color: #6b7280;">已完成</a>
      </div>
      <div style="margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem;">
        <div style="border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem;">
          <div style="display: flex; justify-content: space-between;">
            <span style="font-weight: 500;">地板安装服务</span>
            <span style="color: #10b981; font-size: 0.875rem;">已完成</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; justify-content: space-between; font-size: 0.875rem; color: #6b7280;">
            <span>订单编号: OD20250612001</span>
            <span>2025-06-12</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; justify-content: space-between; align-items: center;">
            <span style="color: #3b82f6; font-weight: bold;">¥350</span>
            <button style="font-size: 0.875rem; border: 1px solid #3b82f6; color: #3b82f6;margin-right: 10px;margin-left: 10px; border-radius: 0.375rem;">查看详情</button>
          </div>
        </div>
        <div style="border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem;">
          <div style="display: flex; justify-content: space-between;">
            <span style="font-weight: 500;">灯具更换服务</span>
            <span style="color: #3b82f6; font-size: 0.875rem;">进行中</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; justify-content: space-between; font-size: 0.875rem; color: #6b7280;">
            <span>订单编号: OD20250613002</span>
            <span>2025-06-13</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; justify-content: space-between; align-items: center;">
            <span style="color: #3b82f6; font-weight: bold;">¥150</span>
            <button style="font-size: 0.875rem; border: 1px solid #3b82f6; color: #3b82f6;margin-right: 10px;margin-left: 10px; border-radius: 0.375rem;">查看详情</button>
          </div>
        </div>
        <div style="border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem;">
          <div style="display: flex; justify-content: space-between;">
            <span style="font-weight: 500;">卫浴安装服务</span>
            <span style="color: #f59e0b; font-size: 0.875rem;">待服务</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; justify-content: space-between; font-size: 0.875rem; color: #6b7280;">
            <span>订单编号: OD20250614003</span>
            <span>2025-06-14</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; justify-content: space-between; align-items: center;">
            <span style="color: #3b82f6; font-weight: bold;">¥350</span>
            <button style="font-size: 0.875rem; border: 1px solid #3b82f6; color: #3b82f6;margin-right: 10px;margin-left: 10px; border-radius: 0.375rem;">查看详情</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务类别 -->
    <div style="background-color: white; padding: 1rem; margin-top: 0.75rem;">
      <h3 style="font-weight: 500;">我的服务</h3>
      <div style="margin-top: 0.75rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;">
        <div style="padding: 0.75rem; background-color: #f9fafb; border-radius: 0.5rem; text-align: center;">
          <i class="fa-solid fa-trowel" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.875rem; margin-top: 0.5rem;">卫浴安装</p>
        </div>
        <div style="padding: 0.75rem; background-color: #f9fafb; border-radius: 0.5rem; text-align: center;">
          <i class="fa-solid fa-couch" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.875rem; margin-top: 0.5rem;">家具安装</p>
        </div>
        <div style="padding: 0.75rem; background-color: #f9fafb; border-radius: 0.5rem; text-align: center;">
          <i class="fa-solid fa-paint-roller" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.875rem; margin-top: 0.5rem;">墙面处理</p>
        </div>
        <div style="padding: 0.75rem; background-color: #f9fafb; border-radius: 0.5rem; text-align: center;">
          <i class="fa-solid fa-lightbulb" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.875rem; margin-top: 0.5rem;">灯具安装</p>
        </div>
        <div style="padding: 0.75rem; background-color: #f9fafb; border-radius: 0.5rem; text-align: center;">
          <i class="fa-solid fa-tree" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.875rem; margin-top: 0.5rem;">地板安装</p>
        </div>
        <div style="padding: 0.75rem; background-color: #f9fafb; border-radius: 0.5rem; text-align: center;">
          <i class="fa-solid fa-plus" style="color: #3b82f6; font-size: 1.25rem;"></i>
          <p style="font-size: 0.875rem; margin-top: 0.5rem;">添加服务</p>
        </div>
      </div>
    </div>

    <!-- 其他功能 -->
    <div style="background-color: white; padding: 1rem; margin-top: 0.75rem;">
      <h3 style="font-weight: 500;">更多功能</h3>
      <div style="margin-top: 0.75rem; display: flex; flex-direction: column; gap: 1rem;">
        <a  style="display: flex; align-items: center;">
          <i class="fa-solid fa-star" style="color: #3b82f6; margin-right: 0.75rem;"></i>
          <span>我的评价</span>
          <i class="fa-solid fa-angle-right" style="color: #d1d5db; margin-left: auto;"></i>
        </a>
        <a  style="display: flex; align-items: center;">
          <i class="fa-solid fa-bell" style="color: #3b82f6; margin-right: 0.75rem;"></i>
          <span>消息通知</span>
          <i class="fa-solid fa-angle-right" style="color: #d1d5db; margin-left: auto;"></i>
        </a>
        <a  style="display: flex; align-items: center;">
          <i class="fa-solid fa-question-circle" style="color: #3b82f6; margin-right: 0.75rem;"></i>
          <span>帮助中心</span>
          <i class="fa-solid fa-angle-right" style="color: #d1d5db; margin-left: auto;"></i>
        </a>
        <a  style="display: flex; align-items: center;">
          <i class="fa-solid fa-user-circle" style="color: #3b82f6; margin-right: 0.75rem;"></i>
          <span>关于我们</span>
          <i class="fa-solid fa-angle-right" style="color: #d1d5db; margin-left: auto;"></i>
        </a>
      </div>
    </div>
  </div>
</template>
  <script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

onMounted(() => {
  // 可以在这里获取用户信息
});
</script>

<style scoped>
/* 页面特有样式 */
</style>